<template>
	<div class="content" @touchmove.prevent>
		<div class="guide" v-if="show_guide" @click="hideGuide">
			<img class="guide-box" :src="guide_box" fit="scale-down" />
			<img class="guide-ele" :src="guide_ele" fit="scale-down" />
		</div>
		<div class="choice" v-else>
			<img :src="card1" @click="pageTo('/picture')" class="card-img" fit="fill" />
			<img :src="card2" @click="pageTo('/calendar')" class="card-img" fit="fill" />
			<img :src="card3" @click="pageTo('/papercut')" class="card-img" fit="fill" />
		</div>
	</div>
</template>

<script>
	import { Image, Button,NavBar } from 'vant';
	import { mapState } from "vuex";
	export default {
		name: "choice",
		components: {
			[Image.name]: Image,
			[Button.name]: Button,
			[NavBar.name]: NavBar
		},
		data() {
		  return {
			  show_guide: true,
			  card1: 'http://h5static.weiyoho.com/assets/card1.png',
			  card2: 'http://h5static.weiyoho.com/assets/card2.png',
			  card3: 'http://h5static.weiyoho.com/assets/card3.png',
			  guide_box: 'http://h5static.weiyoho.com/assets/guide-box.png',
			  guide_ele: 'http://h5static.weiyoho.com/assets/guide-ele.png',
		  };
		},
		mounted() {
			localStorage.getItem("CHIOICE") ? this.show_guide = false : localStorage.setItem("CHIOICE", 1);
		},
		methods:{
			hideGuide(){
				this.show_guide = false
			},
			/**
			 * @desc 跳转页面
			 */
			pageTo(url){
				// this.$router.push(url)
				this.$router.replace(url)
			}
		}
	}
</script>

<style lang="less">
	.content{
		height: 100vh;
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
		background-color: #c53d2a;
		.guide{
			width: 100%;
			height: 100%;
			background: url(../assets/guide-bg.png) no-repeat;
			background-size: 100% 100%;
			&-box{
				width: 100%;
				height: 100%;
				-webkit-animation: guide-ani 2s ease-in-out infinite;
			}
			&-ele{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}
		}
		.choice{
			height: 100vh;
			width: 100%;
			.card-img {
				width: 100vw;
				height: calc(100vh/3);
				margin-top: -4px;
			}
		}
	}
	@keyframes guide-ani{
		0%,50%{
			 transform: scale(1);  /*开始为原始大小*/
		}
		25%,75%{
			transform: scale(1.01); /*放大1.1倍*/
		}
	}
</style>
